// 首页的逻辑
// 1. 拿到 lcoalStorage 内的信息
// id: 为了知道当前登录的是哪一个用户
const id = window.localStorage.getItem('id')
// token: 因为请求当前用户信息的时候, 服务器要求你需要携带这个凭证
//        才能根据凭证证明你登录过, 并且是在有效期内登录过
//        才能给你当前用户的信息
const token = window.localStorage.getItem('token')

// 1. 获取页面元素
const onBox = document.querySelector('.on')
const offBox = document.querySelector('.off')
const registBox = document.querySelector('.regist')
const myLisBox = document.querySelector('.myLis')

// 2. 判断
// 没有 id 说明, 你没有登录过
// 那么直接显示 您好 请登录
if (!id) {
  onBox.classList.remove('active')
  offBox.classList.add('active')
  myLisBox.classList.remove('active')
  registBox.classList.add('active')
}

// 3. 在首页发送请求, 请求当前登录用户的个人信息
// 目的:
//   1. 为了拿到当前用户的 用户昵称
//   2. 为了验证一下当前的登录状态是不是过期了
//      因为只要登录状态过期了, 是拿不到数据的
//      只有登录状态没有过期, 才能拿到数据
const xhr = new XMLHttpRequest()

xhr.open('GET', 'http://localhost:8888/users/info?id=' + id)

xhr.onload = function () {
  const res = JSON.parse(xhr.responseText)
  // 如果你的 token 是正常的, 那么得到一个当前用户的信息(包含 昵称 等信息)
  // 如果你的 token 是过期的, 那么得不到一个信息, 得到的是过期的信息

  // 判断, 如果是 401 说明, 登录过期了, 需要从新登录, 也得显示 您好请登录
  if (res.code === 401) {
    onBox.classList.remove('active')
    offBox.classList.add('active')
    myLisBox.classList.remove('active')
    registBox.classList.add('active')
  }

  // 拿到正常的用户信息了, 那么直接显示 您好 xxxx 个人中心 注销登录
  if (res.code === 1) {
    onBox.firstElementChild.innerText = res.info.nickname
    offBox.classList.remove('active')
    registBox.classList.remove('active')
    onBox.classList.add('active')
    myLisBox.classList.add('active')
  }
}

// 在请求头内书写一个 authorization 信息
// 因为服务器要求, 在请求头内加一个 authorization 信息, 表示你登录过的凭证
xhr.setRequestHeader('authorization', token)

xhr.send()



// 注销登录的点击事件
const logoutBtn = document.querySelector('.logout')
logoutBtn.addEventListener('click', async () => {
  // 不光要删除 lcoalStroage 内的信息
  // 还要发送请求, 告诉服务器, 该账号退出, 让本次的 token 时效
  const res = await pAjax({
    url: 'http://localhost:8888/users/logout',
    data: { id },
    dataType: 'json'
  })

  // 根据 res.code 来操作刷新一下页面
  // 顺便把 lcoalStorage 内的信息也删除
  if (res.code === 1) {
    window.localStorage.removeItem('id')
    window.localStorage.removeItem('token')

    // 刷新页面
    window.location.reload()
  }
})